<template>
  <div class="box">
    <header>
      <span @click="backFn">
        <van-icon name="arrow-left" />
      </span>
      <flot>我的订单</flot>
      <span></span>
    </header>
    <nav>
      <div class="top">
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
      </div>
      <div class="bot">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1">
            <div class="child">
              <span
                @click="userFn(item)"
                v-for="item in list.value"
                :key="item"
                >{{ item.name }}</span
              >
            </div>
          </van-dropdown-item>
          <van-dropdown-item
            @change="statusFn"
            v-model="value2"
            :options="option2"
          />
        </van-dropdown-menu>
      </div>
    </nav>
    <section>
      <div class="userBox" v-for="item in user_list.value" :key="item">
        <p class="p1">
          <span>{{ item.contract_no }}</span>
          <span class="check">审核中</span>
        </p>
        <h3>测试产品</h3>
        <p class="p2">合 同 金 额:{{ item.order_money }}</p>
        <div class="p3">起收益日期：{{ item.account_time }}</div>
      </div>
    </section>
    <footer>
      <dl @click="user_check">
        <dt><van-icon name="plus" /></dt>
        <dd>个人签约</dd>
      </dl>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import apis from "../../../utils/api_nots";
import { useRouter } from "vue-router";
const value = ref("");
const onSearch = (val) => Toast(val);
const onCancel = () => Toast("取消");
const value1 = ref(0);
const value2 = ref("7");
const list = reactive({ value: [] });
const user_list = reactive({ value: [] });
const option1 = [{ text: "所有客户", value: 0 }];
const router = useRouter();
const option2 = [
  { text: "全部状态", value: "7" },
  { text: "待付款", value: "1" },
  { text: "审核中", value: "2" },
  { text: "待生效", value: "3" },
  { text: "已生效", value: "4" },
  { text: "未过审", value: "5" },
  { text: "已结束", value: "6" },
];
const size = reactive({
  page: 1,
  size: 20,
  type: 1,
  user_id: 26524,
});

apis
  .get_user({
    size: 20,
    page: 1,
    state: 1,
    wx_xcx_status: 1,
  })
  .then((res) => {
    list.value = res.data.data.data;
    console.log(list);
  });

// 点击返回
function backFn() {
  history.go(-1);
}
// 点击签约
function user_check() {
  router.push("/my_check");
}
// 点击改变状态
function statusFn(v) {
  if (v != 7) {
    if (v) {
      size.order_status = v;
      setData();
    }
  } else {
    size.order_status = 2;
    setData();
  }
}
// 点击选择用户
function userFn(v) {
  size.user_id = v.id;
  setData();
}

setData();
function setData() {
  apis.get_list(size).then((res) => {
    user_list.value = res.data.data.data;
    console.log(user_list.value);
  });
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
footer {
  width: 100%;
  height: 3rem;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
}
footer dl {
  text-align: center;
  font-size: 1rem;
}
footer dt {
  text-align: center;
}
section {
  padding-top: 9rem;
}
.userBox {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  padding: 0.5rem;
}
nav {
  position: fixed;
  top: 2.3rem;
  width: 100%;
}
.child {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.child span {
  display: block;
  width: 46%;
  text-align: center;
  height: 2rem;
  margin: 0.4rem;
  background: #eee;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 2.3rem;
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}
header span {
  width: 1.3rem;
  font-size: 1.3rem;
}
</style>
